<template>
  <h1>App</h1>
  <el-button type="primary" :icon="Plus" @click="showDialog">经典按钮</el-button>
  <el-button type="warning" @click="success">警告按钮</el-button>
  <el-button type="danger" @click="fail">危险按钮</el-button>

  <!-- 
    v-model="dialogVisible" 决定对话框显示隐藏
  -->
  <el-dialog v-model="dialogVisible" title="对话框标题">
    <!-- 默认插槽，作为内容区展示 -->
    <span>content...</span>
    <!-- 具名插槽 -->
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  name: "App",
});
</script>

<script lang="ts" setup>
import { ref } from "vue";
import { Plus } from "@element-plus/icons-vue";
import { ElMessage } from "element-plus";
// 如果只使用组件 API，您需要手动导入样式
import 'element-plus/es/components/message/style/css'

// 对话框显示/隐藏的标识
const dialogVisible = ref(false);
// 显示对话框
const showDialog = () => {
  dialogVisible.value = true;
};

const success = () => {
  ElMessage.success("成功的提示");
};
const fail = () => {
  ElMessage.error("失败的提示");
};
</script>

<style></style>
